<template>
	<view>
		<u-sticky>
			<view class="flex-col group">
				<view class="flex-col self-stretch">
					<view class="mt-10 flex-row section">
						<view class="flex-row items-center flex-1" @click="isShowPopup=true">
							<u-icon name="search" size="20"></u-icon>
							<text class="flex-1 font text ml-9">{{searchText}}</text>
						</view>
					</view>
				</view>

			</view>
		</u-sticky>
		<u-popup :show="isShowPopup" mode="top">
			<view>


				<u-cell-group>
					<u-cell title="开始日期" :value="startDateText" clickable @click="showBegin"></u-cell>
					<u-cell title="结束日期" :value="endDateText" clickable @click="showEnd"></u-cell>
				</u-cell-group>
				<u-datetime-picker :show="showBeginDate" @cancel="hidDate" v-model="value1" @confirm="confirmBegin"
					mode="date"></u-datetime-picker>
				<u-datetime-picker :show="showEndDate" @cancel="hidDate" v-model="value2" @confirm="confirmEnd"
					mode="date"></u-datetime-picker>
				<view class="flex-row justify-between items-center" style="padding: 20px;">
					<button size="mini" @click="cancelSearch">取消</button> <button size="mini" type="primary"
						@click="doSearch()">确定</button>
				</view>

			</view>
		</u-popup>
		<view class="flex-col page">
			<page-order ref="scroll" :tabIndex="index" :currentIndex="swiperCurrent"></page-order>
		</view>
	</view>
</template>

<script>
	import Utils from "../../common/Utils";
	import pageOrder from "@/components/after-order-item.vue"
	import floatbuttonVue from "@/components/float_button.vue";
	export default {
		components: {
			pageOrder,
			floatbuttonVue
		},
		data() {
			return {
				isShowReport: false,
				isShowSearchPopup: false,
				tabs: [{
					name: "全部"
				}, {
					name: '待审核',
					category: 'CREATED'
				}, {
					name: '已通过',
					category: 'BUYER_PAID'
				}, {
					name: '已驳回',
					category: 'DELIVERING',

				}],
				swiperHeight: "500px",
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				searchForm: {},
				apiUrl: '/customer/orders',
				myRoles: "customer",
				searchText: "",
				value1: Number(new Date()),
				value2: Number(new Date()),
				startDateText: "",
				endDateText: "",
				start: "",
				end: "",
				showBeginDate: false,
				showEndDate: false,
				isShowPopup: false,
			};
		},
		onLoad(options) {
			if (options.state) {
				this.current = Number.parseInt(options.state);
				this.swiperCurrent = Number.parseInt(options.state);
			} else {
				this.current = 0;
				this.swiperCurrent = 0;
			}

			let _me = this;
			var tempHeight = 500;
			uni.getSystemInfo({
				//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                
				success: function(res) {

					tempHeight = res.windowHeight;
					_me.swiperHeight = tempHeight - 80 + 'px';

				}
			});
		},
		onShow() {
			//uni.hideTabBar()
			let token = this.$store.state.userToken;
			this.isShowReport = false
			this.apiUrl = `${Utils.ApiUrl}/waiting/afterSales`
			let tmpDate = new Date();
			this.start = new Date(tmpDate.setDate(tmpDate.getDate() - 60));
			this.end = new Date();
			this.value1 = Number(this.start)
			this.value2 = Number(new Date())
			this.searchForm.start = this.$Utils.formatDate(this.start, 'yyyy-MM-ddTHH:mm:ss');
			this.searchForm.end = this.$Utils.formatDate(this.end, 'yyyy-MM-ddTHH:mm:ss');
			this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
			this.endDateText = this.$Utils.formatDate(this.end, 'yyyy-MM-dd');

			this.searchText =
				`日期: ${this.startDateText} 至 ${this.endDateText}`
			this.$nextTick(() => {
				this.reLoad()
			})

		},
		methods: {
			cancelSearch() {
				this.isShowPopup = false;
			},
			hidDate() {
			
				this.showBeginDate = false;
				this.showEndDate = false;
			},
			getLevel(level) {
				return this.$Utils.getUserLevel(level)
			},
			showBegin() {
			
				this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
				this.showBeginDate = true;
			
			},
			showEnd() {
				this.showEndDate = true;
			
			},
			confirmBegin(e) {
			
				console.log(e)
				this.value1 = e.value;
				this.start = new Date(e.value)
				this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
				this.showBeginDate = false;
				this.showEndDate = false;
			},
			confirmEnd(e) {
				this.value2 = e.value;
			
				this.end = new Date(e.value)
				this.endDateText = this.$Utils.formatDate(this.end, 'yyyy-MM-dd');
				this.showBeginDate = false;
				this.showEndDate = false;
			},
			doSearch() {
				this.searchForm.start = this.$Utils.formatDate(this.start, 'yyyy-MM-ddTHH:mm:ss');
				this.searchForm.end = this.$Utils.formatDate(this.end, 'yyyy-MM-ddTHH:mm:ss');
				this.startDateText = this.$Utils.formatDate(this.start, 'yyyy-MM-dd');
				this.endDateText = this.$Utils.formatDate(this.end, 'yyyy-MM-dd');
				this.searchText =
					`日期: ${this.startDateText} 至 ${this.endDateText}`
				this.isShowPopup = false;
				this.reLoad()
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
				this.reLoad();
				console.log(this.swiperCurrent)
			},
			tabsChange(e) {
				// this.searchValue = "";
				// this.setCurrentType(1)
				this.swiperCurrent = e.index;
				// this.reLoad();
				console.log(this.swiperCurrent)

			},
			reLoad() {
				this.$nextTick(() => {
					this.searchForm.pageNo = 0;
					this.searchForm.pageSize = 30;
					this.searchForm.category = this.tabs[this.swiperCurrent].category;
					this.$refs.scroll.reSearch(this.searchForm, this.apiUrl);
				})

			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;

				//this.$refs.uTabs.setDx(dx);

			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				//this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;


			},
			tabChange(url) {
				uni.switchTab({
					url
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.u-tabs__wrapper__nav[data-v-48634e29] {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}



	.ml-9 {
		margin-left: 15.7rpx;
	}

	.ml-23 {
		margin-left: 40.12rpx;
	}

	.ml-17 {
		margin-left: 29.65rpx;
	}

	.ml-55 {
		margin-left: 95.93rpx;
	}

	.font {
		font-size: 28.42rpx;
		font-family: SourceHanSansCN;
		line-height: 29.65rpx;
	}

	.group {
		padding-bottom: 24.42rpx;
		background-color: #f2f2f2;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.section {
			margin: 0 8.72rpx;
			padding: 10.47rpx 22.67rpx;
			background-color: #ffffff;
			border-radius: 27.91rpx;

			.image_2 {
				width: 34.88rpx;
				height: 34.88rpx;
			}

			.text {
				color: #757575;
			}

			.text-wrapper {
				margin-right: 8.72rpx;
				padding: 6.98rpx 0;
				background-color: #ff0101;
				border-radius: 8.72rpx;
				width: 87.21rpx;

				font-size: 28rpx;
				padding: 5rpx 0;
				color: #fff;

			}
		}

		.group_2 {
			margin-left: 13.95rpx;
			margin-top: 31.4rpx;

			.text_3 {
				color: #737373;
				font-size: 28rpx;
			}

			.text_4 {
				margin-left: 41.86rpx;
				color: #000000;
				font-size: 28rpx;
			}

			.text_5 {
				color: #737373;
				text-indent: 108.89rpx;
				width: 108.89rpx;
				font-size: 28rpx;
			}
		}

		.section_2 {
			margin-left: 118.6rpx;
			margin-top: 13.95rpx;
			background-color: #fb65af;
			border-radius: 3.49rpx;
			width: 48.84rpx;
			height: 6.98rpx;
		}
	}

	.page {
		background-color: #f2f2f2;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;



		.section_3 {
			margin-left: 13.95rpx;
			margin-right: 20.93rpx;
			padding: 13.95rpx 10.47rpx 22.67rpx;
			background-color: #ffffff;
			border-radius: 17.44rpx;

			.group_3 {
				margin-left: 3.49rpx;

				.text_6 {
					color: #000000;
					line-height: 22.34rpx;
				}

				.text_7 {
					color: #888888;
				}
			}

			.group_4 {
				margin-top: 20.93rpx;

				.image_3 {
					border-radius: 8.72rpx;
					width: 139.53rpx;
					height: 139.53rpx;
				}

				.group_5 {
					margin: 6.98rpx 0;

					.text_8 {
						color: #575757;
						line-height: 22.52rpx;
					}

					.text_10 {
						margin-left: 6.98rpx;
						margin-top: 38.37rpx;
						color: #808080;
						line-height: 26.76rpx;
					}

					.group_6 {
						margin-top: 13.95rpx;
						padding: 0 6.98rpx;

						.text_11 {
							line-height: 23.83rpx;
						}

						.text_12 {
							color: #000000;
							font-size: 24.42rpx;
							font-family: SourceHanSansCN;
							line-height: 18.21rpx;
						}
					}
				}

				.font_3 {
					font-size: 31.4rpx;
					font-family: SourceHanSansCN;
					color: #ff0101;
				}

				.text_9 {
					margin-right: 24.42rpx;
					font-weight: 700;
					line-height: 29.55rpx;
				}
			}

			.divider {
				margin: 27.91rpx 10.47rpx 0;
				background-color: #e8e8e8;
				height: 1.74rpx;
			}

			.text-wrapper_2 {
				margin-top: 24.42rpx;
				padding: 10.47rpx 0;
				background-color: #43cf7c;
				border-radius: 17.44rpx;
				width: 139.53rpx;

				.text_13 {
					line-height: 22.57rpx;
				}
			}
		}

		.font_2 {
			font-size: 28.42rpx;
			font-family: SourceHanSansCN;
			line-height: 22.69rpx;
			color: #ffffff;
		}



		.section_4 {
			margin-top: 1109.3rpx;
			padding: 12.21rpx 0 50.58rpx;
			background-color: #fafafa;

			.equal-division-item {
				width: 48.84rpx;
				height: 48.84rpx;
			}
		}
	}
</style>